﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>陕西省石头河灌溉管理系统</title>
    <link rel="stylesheet" href="css/comon0.css?V=17">
    <script src="/ViewV5/JS/vue.js"></script>

    <script src="/ViewV5/JS/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="js/jquery.countup.min.js"></script>
    <script src="/ViewV5/JS/lodash.min.js"></script>
    <style>
        .nd {
            border: 1px solid #409eff;
            PADDING: 5PX;
            margin-left: 10PX;
            height: 36PX;
            FONT-SIZE: 18PX;
            MARGIN-TOP: 5PX;
            BACKGROUND-COLOR: TRANSPARENT;
            COLOR: WHITE;
        }
    </style>
</head>
<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })
</script>
<body>
    <div id="dvContent" class="iframecontent">
        <!--<div class="canvas" style="opacity: .2">-->
            <!--<iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>-->
        <!--</div>-->
        <div class="loading">
            <div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
        </div>
        <div class="head">
            <h1 style="FONT-FAMILY: CURSIVE; FONT-WEIGHT: 700;color:#f44336;">
                <img src="/ViewV5/images/qywd/bf.png" @click="qp" style="height:26px;width:26px;float:left;margin-top:10px;margin-left:10px" title="全屏"/>
                陕西省石头河灌溉管理系统 <select id="nd" class="nd" @change="chnd()">
                    <option value="2021">2021灌溉年</option>
                    <option value="2020">2020灌溉年</option>
                    <option value="2019">2019灌溉年</option>
                    <option value="2018">2018灌溉年</option>

                </select>
            </h1>
            <div class="weather"><!--<img src="picture/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></div>




        </div>
        <div class="mainbox">
            <ul class="clearfix">
                <li>
                    <div class="boxall" style="height: 2.7rem">
                        <div class="alltitle">今日水情</div>

                        <div class="sycm">
                            <ul class="clearfix">
                                <li v-for="(item,index) in dpdata.drsq" v-show="index<3"><h2 style="color:#ffeb7b" v-text="item.col18236"></h2><span v-text="item.DeptName"></span></li>

                            </ul>
                            <div style="border-bottom: 1px solid rgba(255,255,255,.1);"></div>
                            <ul class="clearfix">
                                <li v-for="(item,index) in dpdata.drsq" v-show="index>2"><h2 style="color:#ffeb7b" v-text="item.col18236"></h2><span v-text="item.DeptName"></span></li>

                            </ul>


                        </div>
                        <div class="boxfoot"></div>
                    </div>
                    <div class="boxall" style="height:6.32rem">
                        <div class="alltitle">新增灌溉信息</div>
                        <div class="tabs" style="margin-bottom:20PX">
                            <ul class="clearfix">
                                <li><a href="#" style="color:#ffeb7b" @click="goxz('0')" v-bind:class="{ active: tbtype1=='0' }">本日</a></li>
                                <li><a href="#" style="color:#ffeb7b" @click="goxz('1')" v-bind:class="{ active: tbtype1=='1' }">本月</a></li>
                                <li><a href="#" style="color:#ffeb7b" @click="goxz('2')" v-bind:class="{ active: tbtype1=='2' }">本灌季</a></li>

                            </ul>
                        </div>
                        <div class="clearfix">
                            <div class="sy" id="echarts6"></div>
                            <div class="sy" id="echarts7"></div>
                            <div class="sy" id="echarts8"></div>
                        </div>
                        <div class="addnew">
                            <div class="tit02"><span>新增灌溉记录</span></div>
                            <div class="adduser" style="height: 2.0rem;">
                                <ul class="clearfix">
                                    <li class="clearfix" v-for="item in dpdata.ggjl"> <span class="pulll_left"><img src="images/DTX.png">{{item.GLZNAME}}-{{item.XM}}</span> <span class="pulll_right">{{item.ZSL}}m₃ - ￥{{item.ZJE}} </span> </li>
                                </ul>
                            </div>
                        </div>
                        <div class="boxfoot"></div>
                    </div>

                    <div class="boxall" style="height: 3.2rem;display:none">
                        <div class="alltitle">模块标题样式</div>
                        <div class="allnav" id="echar"></div>
                        <div class="boxfoot"></div>
                    </div>
                    <div class="boxall" style="height: 3.1rem;display:none">
                        <div class="alltitle">模块标题样式</div>
                        <div class="allnav" id="echart6"></div>
                        <div class="boxfoot"></div>
                    </div>
                </li>
                <li>
                    <div class="bar">
                        <div class="barbox">
                            <ul class="clearfix">
                                <li class="pulll_left counter" v-for="item in dpdata.zsq" v-text="item"></li>

                            </ul>
                        </div>
                        <div class="barbox2">
                            <ul class="clearfix">
                                <li class="pulll_left">用水量（万方）</li>
                                <li class="pulll_left">灌溉亩数（万亩）</li>
                                <li class="pulll_left">用水金额（万元）</li>

                            </ul>
                        </div>
                    </div>
                    <div class="map" style="margin-top:15px">

                        <!--<div class="map1"><img src="picture/lbx.png"></div>
                        <div class="map2"><img src="picture/jt.png"></div>
                        <div class="map3"><img src="picture/map.png"></div>-->
                        <!--<div class="map4" id="map_1"></div>-->

                        <div class="boxall" style="height: 7.46rem;">
                            <div class="tabs">
                                <ul class="clearfix">
                                    <li><a href="#" style="color:#ffeb7b" @click="gotb('0')" v-bind:class="{ active: tbtype=='0' }">用水量（万方）</a></li>
                                    <li><a href="#" style="color:#ffeb7b" @click="gotb('1')" v-bind:class="{ active: tbtype=='1' }">灌溉亩数（万亩）</a></li>
                                    <li><a href="#" style="color:#ffeb7b" @click="gotb('2')" v-bind:class="{ active: tbtype=='2' }">用水金额（万元）</a></li>
                                    <!--<li><a href="#" style="color:#ffeb7b">已缴费金额</a></li>-->

                                </ul>
                            </div>
                            <div class="alltitle" style="margin-top:5px">各管理站占比</div>

                            <div class="allnav" id="echart5"></div>
                            <div class="boxfoot"></div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="boxall" style="height:3.25rem;">
                        <div class="alltitle">年度月灌溉用水量曲线图</div>
                        <div class="allnav" id="echart4"></div>
                        <div class="boxfoot"></div>
                    </div>

                    <div class="boxall" style="height: 3.25rem;">
                        <div class="alltitle">年度灌溉（同比图）</div>
                        <div class="allnav" id="echart2"></div>
                        <div class="boxfoot"></div>
                    </div>
                    <div class="boxall" style="height: 2.4rem">
                        <div class="alltitle">年度灌溉用水量作物占比</div>
                        <div class="allnav" id="echarts9"></div>
                        <div class="boxfoot"></div>
                    </div>

                </li>
            </ul>
        </div>
        <div class="back"></div>
    </div>
    <script>
        function getQueryString(name, defauval) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) { return unescape(r[2]); }
            else {
                return defauval || "";
            }
        }
        var app = new Vue({
            el: '#dvContent',
            data: {
                tbtype: "0",
                tbtype1:"0",
                nd: "2021",
                dpdata: {
                    drsq: [

                    ],
                    zsq: [],
                    ggjl: [],
                    gjysl: [],
                    gjggms: [],
                    gjzje: [],

                    br: [],
                    by: [],
                    bgj: [],

                    option2: {
                        dimensions: ['年度', '用水量', '灌溉亩数', '用水金额'],
                        source: [

                        ]

                    },
                    option4: {
                        source: [ ]

                    },//
                    option5: {
                        dimensions: ['管理站', '冬灌', '春灌', '夏灌'],
                        source: []
                    },
                    option9: {
                        source: []

                    }
                }
            },


            methods: {
                qp: function () {
                    if (document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen) {
                        app.exitFullscreen()
                    } else {
                        app.requestFullScreen();
                    }

                },
                requestFullScreen: function () {
                    var de = document.documentElement;
                    if (de.requestFullscreen) {
                        de.requestFullscreen();
                    } else if (de.mozRequestFullScreen) {
                        de.mozRequestFullScreen();
                    } else if (de.webkitRequestFullScreen) {
                        de.webkitRequestFullScreen();
                    }
                },
                exitFullscreen: function () {
                    var de = document;
                    if (de.exitFullscreen) {
                        de.exitFullscreen();
                    } else if (de.mozCancelFullScreen) {
                        de.mozCancelFullScreen();
                    } else if (de.webkitCancelFullScreen) {
                        de.webkitCancelFullScreen();
                    }
                },
                chnd: function () {
                    location.href = "/Web/SFJSSTH/DP1/index.html?nd=" + $("#nd").val();
                },
                gotb: function (tbtype) {
                    app.tbtype = tbtype;
                    var myChart5 = echarts.init(document.getElementById('echart5'));
                    if (tbtype == "0") {
                        // option5.dataset[0].source = app.dpdata.gjysl;
                        app.dpdata.option5.source = app.dpdata.gjysl;
                        option5 = {
                            //  backgroundColor: '#00265f',
                            legend: {
                                data: ['冬灌', '春灌', '夏灌'],
                                textStyle: {
                                    color: 'rgba(255,255,255,.5)',
                                    fontSize: '12',
                                }
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            dataset: {
                                // 提供一份数据。
                                source: app.dpdata.option5.source
                            },
                            grid: {
                                left: '0%',
                                top: '20px',
                                right: '0%',
                                bottom: '6%',
                                containLabel: true
                            },
                            xAxis: [{
                                type: 'category',
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)",
                                        width: 1,
                                        type: "solid"
                                    },
                                },

                                axisTick: {
                                    show: false,
                                },
                                axisLabel: {
                                    interval: 0,
                                    // rotate:50,
                                    show: true,
                                    splitNumber: 15,
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: '12',
                                    },
                                },
                            }],
                            yAxis: [{
                                type: 'value',
                                axisLabel: {
                                    //formatter: '{value} %'
                                    show: true,
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: '12',
                                    },
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1	)",
                                        width: 1,
                                        type: "solid"
                                    },
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)",
                                    }
                                }
                            }],
                            series: [{
                                name: "冬灌",
                                type: 'bar',
                                stack: '管理站',
                                itemStyle: {
                                    normal: {
                                        color: '#27d08a',
                                        opacity: 1,
                                        barBorderRadius: 2,
                                    }
                                }
                            },
                            {
                                name: "春灌",
                                type: 'bar',
                                stack: '管理站',
                                itemStyle: {
                                    normal: {
                                        color: '#ffeb7b',
                                        opacity: 1,
                                        barBorderRadius: 2,
                                    }
                                }
                            },
                            {
                                name: "夏灌",
                                type: 'bar',
                                stack: '管理站',
                                itemStyle: {
                                    normal: {
                                        color: '#F56C6C',
                                        opacity: 1,
                                        barBorderRadius: 2,
                                    }
                                }
                            }]
                        };
                        myChart5.setOption(option5);

                    }
                    if (tbtype == "1") {
                        app.dpdata.option5.source = app.dpdata.gjggms;
                        option5 = {
                            //  backgroundColor: '#00265f',
                            legend: {
                                data: ['冬灌', '春灌', '夏灌'],
                                textStyle: {
                                    color: 'rgba(255,255,255,.5)',
                                    fontSize: '12',
                                }
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            dataset: {
                                // 提供一份数据。
                                source: app.dpdata.option5.source
                            },
                            grid: {
                                left: '0%',
                                top: '20px',
                                right: '0%',
                                bottom: '6%',
                                containLabel: true
                            },
                            xAxis: [{
                                type: 'category',
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)",
                                        width: 1,
                                        type: "solid"
                                    },
                                },

                                axisTick: {
                                    show: false,
                                },
                                axisLabel: {
                                    interval: 0,
                                    // rotate:50,
                                    show: true,
                                    splitNumber: 15,
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: '12',
                                    },
                                },
                            }],
                            yAxis: [{
                                type: 'value',
                                axisLabel: {
                                    //formatter: '{value} %'
                                    show: true,
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: '12',
                                    },
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1	)",
                                        width: 1,
                                        type: "solid"
                                    },
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)",
                                    }
                                }
                            }],
                            series: [{
                                name: "冬灌",
                                type: 'bar',
                                stack: '管理站',
                                itemStyle: {
                                    normal: {
                                        color: '#27d08a',
                                        opacity: 1,
                                        barBorderRadius: 2,
                                    }
                                }
                            },
                            {
                                name: "春灌",
                                type: 'bar',
                                stack: '管理站',
                                itemStyle: {
                                    normal: {
                                        color: '#ffeb7b',
                                        opacity: 1,
                                        barBorderRadius: 2,
                                    }
                                }
                            },
                            {
                                name: "夏灌",
                                type: 'bar',
                                stack: '管理站',
                                itemStyle: {
                                    normal: {
                                        color: '#F56C6C',
                                        opacity: 1,
                                        barBorderRadius: 2,
                                    }
                                }
                            }]
                        };
                        myChart5.setOption(option5);
                        //option5.dataset[0].source = app.dpdata.gjggms;
                    }
                    if (tbtype == "2") {
                        app.dpdata.option5.source = app.dpdata.gjzje;
                        option5 = {
                            //  backgroundColor: '#00265f',
                            legend: {
                                data: ['冬灌', '春灌', '夏灌'],
                                textStyle: {
                                    color: 'rgba(255,255,255,.5)',
                                    fontSize: '12',
                                }
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            dataset: {
                                // 提供一份数据。
                                source: app.dpdata.option5.source
                            },
                            grid: {
                                left: '0%',
                                top: '20px',
                                right: '0%',
                                bottom: '6%',
                                containLabel: true
                            },
                            xAxis: [{
                                type: 'category',
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)",
                                        width: 1,
                                        type: "solid"
                                    },
                                },

                                axisTick: {
                                    show: false,
                                },
                                axisLabel: {
                                    interval: 0,
                                    // rotate:50,
                                    show: true,
                                    splitNumber: 15,
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: '12',
                                    },
                                },
                            }],
                            yAxis: [{
                                type: 'value',
                                axisLabel: {
                                    //formatter: '{value} %'
                                    show: true,
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: '12',
                                    },
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1	)",
                                        width: 1,
                                        type: "solid"
                                    },
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)",
                                    }
                                }
                            }],
                            series: [{
                                name: "冬灌",
                                type: 'bar',
                                stack: '管理站',
                                itemStyle: {
                                    normal: {
                                        color: '#27d08a',
                                        opacity: 1,
                                        barBorderRadius: 2,
                                    }
                                }
                            },
                            {
                                name: "春灌",
                                type: 'bar',
                                stack: '管理站',
                                itemStyle: {
                                    normal: {
                                        color: '#ffeb7b',
                                        opacity: 1,
                                        barBorderRadius: 2,
                                    }
                                }
                            },
                            {
                                name: "夏灌",
                                type: 'bar',
                                stack: '管理站',
                                itemStyle: {
                                    normal: {
                                        color: '#F56C6C',
                                        opacity: 1,
                                        barBorderRadius: 2,
                                    }
                                }
                            }]
                        };
                        myChart5.setOption(option5);
                        //option5.dataset[0].source = app.dpdata.gjzje;

                    }
                    myChart5.setOption(option5);
                },
                goxz: function (tbtype) {
                    var pro = this;
                    app.tbtype1 = tbtype;
                    var myChart6 = echarts.init(document.getElementById('echarts6'));
                    var myChart7 = echarts.init(document.getElementById('echarts7'));
                    var myChart8 = echarts.init(document.getElementById('echarts8'));
                    var v1 = 0;
                    var v2 = 0;
                    var v3 = 0;
                    if (tbtype == "0") {
                        v1 = pro.dpdata.br[0].ZSL;
                        v2 = pro.dpdata.br[0].TDMS;
                        v3 = pro.dpdata.br[0].ZJE;
                    }
                    if (tbtype == "1") {
                        v1 = pro.dpdata.br[0].ZSL;
                        v2 = pro.dpdata.br[0].TDMS;
                        v3 = pro.dpdata.br[0].ZJE;
                     
                    }
                    if (tbtype == "2") {
                        v1 = pro.dpdata.bgj[0].ZSL;
                        v2 = pro.dpdata.bgj[0].TDMS;
                        v3 = pro.dpdata.bgj[0].ZJE;
                    }
                    option6 = {
                        series: [{
                            type: 'pie',
                            radius: ['70%', '80%'],
                            color: '#27d08a',
                            label: {
                                normal: {
                                    position: 'center'
                                }
                            },
                            data: [{
                                value: v1,
                                label: {
                                    normal: {
                                        formatter: function (params) {
                                            return v1 + "m³";
                                        },
                                        textStyle: {
                                            fontSize: 12,
                                            color: '#fff',
                                        }
                                    }
                                }
                            }]
                        }]

                    };
                    option7 = {
                        series: [{
                            type: 'pie',
                            radius: ['70%', '80%'],
                            color: '#fccb00',
                            label: {
                                normal: {
                                    position: 'center'
                                }
                            },
                            data: [{
                                value: v2,
                                name: '灌溉亩数',
                                label: {
                                    normal: {
                                        formatter: v2 + '亩',
                                        textStyle: {
                                            fontSize: 12,
                                            color: '#fff',
                                        }
                                    }
                                }
                            }]
                        }]
                    };
                    option8 = {


                        series: [{

                            type: 'pie',
                            radius: ['70%', '80%'],
                            color: '#F56C6C',
                            label: {
                                normal: {
                                    position: 'center'
                                }
                            },
                            data: [{
                                value: v3,
                                name: '用水金额',
                                label: {
                                    normal: {
                                        formatter: v3 + '¥',
                                        textStyle: {
                                            fontSize: 12,
                                            color: '#fff',
                                        }
                                    }
                                }
                            }]
                        }]
                    };
                    myChart6.setOption(option6);
                    myChart7.setOption(option7);
                    myChart8.setOption(option8);

                },
                initdata: function (nd) {
                    var pro = this;
                    $.ajax({
                        url: "/API/VIEWPUBAPI.ashx?Action=SFJS_GGNDTJ",
                        data: JSON.stringify({ "P1": nd }),
                        dataType: "json",
                        type: "post",
                        processData: false,
                        contentType: "text/json",
                        success: function (data, textStatus) {

                            pro.dpdata.zsq = data.Result3.split(",");
                            setTimeout(function () {
                                $('.counter').countUp();
                            }, 500);

                            pro.dpdata.option2.source = data.Result4;
                            var myChart2 = echarts.init(document.getElementById('echart2'));
                            option2 = {
                                //  backgroundColor: '#00265f',
                                legend: {
                                    data: ['用水量', '灌溉亩数', '用水金额'],
                                    textStyle: {
                                        color: 'rgba(255,255,255,.5)',
                                        fontSize: '12',
                                    },
                                    selectedMode:"single"
                               
                                },
                                dataset: {
                                    // 提供一份数据。
                                    source: app.dpdata.option2.source
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: { type: 'shadow' }
                                },
                                grid: {
                                    left: '0%',
                                    top: '35px',
                                    right: '0%',
                                    bottom: '0%',
                                    containLabel: true
                                },
                                xAxis: [{
                                    type: 'category',
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: "rgba(255,255,255,.1)",
                                            width: 1,
                                            type: "solid"
                                        },
                                    },

                                    axisTick: {
                                        show: false,
                                    },
                                    axisLabel: {
                                        interval: 0,
                                        // rotate:50,
                                        show: true,
                                        splitNumber: 15,
                                        textStyle: {
                                            color: "rgba(255,255,255,.6)",
                                            fontSize: '12',
                                        },
                                    },
                                }],
                                yAxis: [{
                                    type: 'value',
                                    axisLabel: {
                                        //formatter: '{value} %'
                                        show: true,
                                        textStyle: {
                                            color: "rgba(255,255,255,.6)",
                                            fontSize: '12',
                                        },
                                    },
                                    axisTick: {
                                        show: false,
                                    },
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: "rgba(255,255,255,.1	)",
                                            width: 1,
                                            type: "solid"
                                        },
                                    },
                                    splitLine: {
                                        lineStyle: {
                                            color: "rgba(255,255,255,.1)",
                                        }
                                    }
                                }],
                                series: [
                                    {
                                        name: "用水量",
                                        type: 'bar',
                                        // barGap: 1, //柱子之间间距
                                        itemStyle: {
                                            normal: {
                                                color: '#27d08a',
                                                opacity: 1,
                                                barBorderRadius: 2,
                                            }
                                        }
                                    },
                                    {
                                        name: "灌溉亩数",
                                        type: 'bar',
                                        // barGap: 1, //柱子之间间距
                                        itemStyle: {
                                            normal: {
                                                color: '#ffeb7b',
                                                opacity: 1,
                                                barBorderRadius: 2,
                                            }
                                        }
                                    },
                                    {
                                        name: "用水金额",
                                        type: 'bar',
                                        // barGap: 1, //柱子之间间距
                                        itemStyle: {
                                            normal: {
                                                color: '#F56C6C',
                                                opacity: 1,
                                                barBorderRadius: 2,
                                            }
                                        }
                                    }

                                ]
                            };
                            myChart2.setOption(option2);
                            myChart2.resize();


                            pro.dpdata.gjysl = data.Result;
                            pro.dpdata.gjggms = data.Result1;
                            pro.dpdata.gjzje = data.Result2;

                            pro.dpdata.option5.source = pro.dpdata.gjysl;
                            var myChart5 = echarts.init(document.getElementById('echart5'));
                            option5 = {
                                //  backgroundColor: '#00265f',
                                legend: {
                                    data: ['冬灌', '春灌', '夏灌'],
                                    textStyle: {
                                        color: 'rgba(255,255,255,.5)',
                                        fontSize: '12',
                                    }
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'
                                    },
                                    formatter: function (params) {
                                        var tar = params[1];
                                        var hj = tar.value.春灌 * 1 + tar.value.冬灌 * 1 + tar.value.夏灌 * 1
                                        return tar.name + '<br/>春灌 : ' + tar.value.春灌 + '<br/>冬灌: ' + tar.value.冬灌 + '<br/>夏灌: ' + tar.value.夏灌 + '<br/>合计: ' + hj;
                                    }
                                },
                                dataset: {
                                    // 提供一份数据。
                                    source: app.dpdata.option5.source
                                },
                                grid: {
                                    left: '0%',
                                    top: '40px',
                                    right: '0%',
                                    bottom: '6%',
                                    containLabel: true
                                },
                                xAxis: [{
                                    type: 'category',
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: "rgba(255,255,255,.1)",
                                            width: 1,
                                            type: "solid"
                                        },
                                    },

                                    axisTick: {
                                        show: false,
                                    },
                                    axisLabel: {
                                        interval: 0,
                                        // rotate:50,
                                        show: true,
                                        splitNumber: 15,
                                        textStyle: {
                                            color: "rgba(255,255,255,.6)",
                                            fontSize: '12',
                                        },
                                    },
                                }],
                                yAxis: [{
                                    type: 'value',
                                    axisLabel: {
                                        //formatter: '{value} %'
                                        show: true,
                                        textStyle: {
                                            color: "rgba(255,255,255,.6)",
                                            fontSize: '12',
                                        },
                                    },
                                    axisTick: {
                                        show: false,
                                    },
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: "rgba(255,255,255,.1	)",
                                            width: 1,
                                            type: "solid"
                                        },
                                    },
                                    splitLine: {
                                        lineStyle: {
                                            color: "rgba(255,255,255,.1)",
                                        }
                                    }
                                }],
                                series: [{
                                    name: "冬灌",
                                    type: 'bar',
                                    stack: '管理站',
                                    itemStyle: {
                                        normal: {
                                            color: '#27d08a',
                                            opacity: 1,
                                            barBorderRadius: 2,
                                        }
                                    }
                                },
                                {
                                    name: "春灌",
                                    type: 'bar',
                                    stack: '管理站',
                                    itemStyle: {
                                        normal: {
                                            color: '#ffeb7b',
                                            opacity: 1,
                                            barBorderRadius: 2,
                                        }
                                    }
                                },
                                {
                                    name: "夏灌",
                                    type: 'bar',
                                    stack: '管理站',
                                    itemStyle: {
                                        normal: {
                                            color: '#F56C6C',
                                            opacity: 1,
                                            barBorderRadius: 2,
                                        }
                                    }
                                }]
                            };
                            myChart5.setOption(option5);
                            myChart5.resize();


                            var myChart4 = echarts.init(document.getElementById('echart4'));
                            option4 = {
                                legend: {
                                    top: '0%',
                                    data: ['安乐', '齐镇', '金渠', '汤峪', '青化'],
                                    textStyle: {
                                        color: 'rgba(255,255,255,.5)',
                                        fontSize: '12',
                                    }
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        lineStyle: {
                                            color: '#dddc6b'
                                        }
                                    }
                                },
                                grid: {
                                    left: '10',
                                    top: '40px',
                                    right: '10',
                                    bottom: '10',
                                    containLabel: true
                                },
                                dataset: {
                                    source: data.Result6
                                },
                                xAxis: [{
                                    type: 'category',
                                    boundaryGap: false,
                                    axisLabel: {
                                        textStyle: {
                                            color: "rgba(255,255,255,.6)",
                                            fontSize: 12,
                                        },
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            color: 'rgba(255,255,255,.2)'
                                        }

                                    }
                                }, {

                                    axisPointer: { show: false },
                                    axisLine: { show: false },
                                    position: 'bottom',
                                    offset: 20,



                                }],
                                yAxis: [{
                                    type: 'value',
                                    axisTick: { show: false },
                                    axisLine: {
                                        lineStyle: {
                                            color: 'rgba(255,255,255,.1)'
                                        }
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: "rgba(255,255,255,.6)",
                                            fontSize: 12,
                                        },
                                    },

                                    splitLine: {
                                        lineStyle: {
                                            color: 'rgba(255,255,255,.1)'
                                        }
                                    }
                                }],
                                series: [
                                    {
                                        name: "安乐",
                                        type: 'line',
                                        smooth: true,
                                        symbol: 'circle',
                                        symbolSize: 5,
                                        showSymbol: false,
                                        lineStyle: {

                                            normal: {
                                                color: '#0184d5',
                                                width: 2
                                            }
                                        },

                                        itemStyle: {
                                            normal: {
                                                color: '#0184d5',
                                                borderColor: 'rgba(221, 220, 107, .1)',
                                                borderWidth: 12
                                            }
                                        }
                                    },
                                    {
                                        name: '齐镇',
                                        type: 'line',
                                        smooth: true,
                                        symbol: 'circle',
                                        symbolSize: 5,
                                        showSymbol: false,
                                        lineStyle: {

                                            normal: {
                                                color: '#00d887',
                                                width: 2
                                            }
                                        },
                                        areaStyle: {
                                            normal: {
                                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(0, 216, 135, 0.4)'
                                                }, {
                                                    offset: 0.8,
                                                    color: 'rgba(0, 216, 135, 0.1)'
                                                }], false),
                                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                            }
                                        },
                                        itemStyle: {
                                            normal: {
                                                color: '#00d887',
                                                borderColor: 'rgba(221, 220, 107, .1)',
                                                borderWidth: 12
                                            }
                                        }
                                    },
                                    {
                                        name: '金渠',
                                        type: 'line',
                                        smooth: true,
                                        symbol: 'circle',
                                        symbolSize: 5,
                                        showSymbol: false,
                                        lineStyle: {

                                            normal: {
                                                color: '#ffeb7b',
                                                width: 2
                                            }
                                        },
                                        areaStyle: {
                                            normal: {
                                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(0, 216, 135, 0.4)'
                                                }, {
                                                    offset: 0.8,
                                                    color: 'rgba(0, 216, 135, 0.1)'
                                                }], false),
                                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                            }
                                        },
                                        itemStyle: {
                                            normal: {
                                                color: '#ffeb7b',
                                                borderColor: 'rgba(221, 220, 107, .1)',
                                                borderWidth: 12
                                            }
                                        },
                                    },
                                    {
                                        name: '汤峪',
                                        type: 'line',
                                        smooth: true,
                                        symbol: 'circle',
                                        symbolSize: 5,
                                        showSymbol: false,
                                        lineStyle: {

                                            normal: {
                                                color: '#F56C6C',
                                                width: 2
                                            }
                                        },
                                        areaStyle: {
                                            normal: {
                                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(0, 216, 135, 0.4)'
                                                }, {
                                                    offset: 0.8,
                                                    color: 'rgba(0, 216, 135, 0.1)'
                                                }], false),
                                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                            }
                                        },
                                        itemStyle: {
                                            normal: {
                                                color: '#F56C6C',
                                                borderColor: 'rgba(221, 220, 107, .1)',
                                                borderWidth: 12
                                            }
                                        },
                                    },
                                    {
                                        name: '青化',
                                        type: 'line',
                                        smooth: true,
                                        symbol: 'circle',
                                        symbolSize: 5,
                                        showSymbol: false,
                                        lineStyle: {

                                            normal: {
                                                color: '#00d887',
                                                width: 2
                                            }
                                        },
                                        areaStyle: {
                                            normal: {
                                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(0, 216, 135, 0.4)'
                                                }, {
                                                    offset: 0.8,
                                                    color: 'rgba(0, 216, 135, 0.1)'
                                                }], false),
                                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                            }
                                        },
                                        itemStyle: {
                                            normal: {
                                                color: '#00d887',
                                                borderColor: 'rgba(221, 220, 107, .1)',
                                                borderWidth: 12
                                            }
                                        },
                                    }
                                ]
                            };
                            myChart4.setOption(option4);
                            myChart4.resize();


                            pro.dpdata.option9.source = data.Result5;
                            var myChart9 = echarts.init(document.getElementById('echarts9'));
                            let formatNumber = function (num) {
                                let reg = /(?=(\B)(\d{3})+$)/g;
                                return num.toString().replace(reg, ',');
                            }
                            let total = pro.dpdata.option9.source.reduce((a, b) => {
                                return a + b.value * 1
                            }, 0);
                            option9 = {
                                color: ['#27d08a', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'],
                                // tooltip: {
                                //     trigger: 'item'
                                // },
                                title: [{
                                    text: '{name|用水量}\n{val|' + formatNumber(total) + '}',
                                    top: 'center',
                                    left: 'center',
                                    textStyle: {
                                        rich: {
                                            name: {
                                                fontSize: 12,
                                                fontWeight: 'normal',
                                                color: '#ffeb7b',
                                                padding: [5, 0]
                                            },
                                            val: {
                                                fontSize: 12,
                                                fontWeight: 'bold',
                                                color: '#ffeb7b',
                                            }
                                        }
                                    }
                                }],
                                series: [{
                                    type: 'pie',
                                    radius: ['65%', '55%'],
                                    center: ['50%', '50%'],
                                    data: app.dpdata.option9.source,
                                    hoverAnimation: false,
                                    itemStyle: {
                                        normal: {
                                            borderColor: "#fff",
                                            borderWidth: 2
                                        }
                                    },
                                    labelLine: {
                                        normal: {
                                            length: 10,
                                            length2: 50,
                                            lineStyle: {
                                                color: '#ffeb7b'
                                            }
                                        }
                                    },
                                    label: {
                                        normal: {
                                            formatter: params => {
                                                return (
                                                    '{icon|●}{name|' + params.name + '}{value|' +
                                                    formatNumber(params.value) + '}'
                                                );
                                            },
                                            padding: [0, -50, 15, -50],
                                            rich: {
                                                icon: {
                                                    fontSize: 12
                                                },
                                                name: {
                                                    fontSize: 12,
                                                    padding: [0, 10, 0, 4],
                                                    color: '#ffeb7b'
                                                },
                                                value: {
                                                    fontSize: 12,
                                                    fontWeight: 'bold',
                                                    color: '#ffeb7b'
                                                }
                                            }
                                        }
                                    },
                                }]
                            };
                            myChart9.setOption(option9);
                            myChart9.resize();


                        }
                    });


                   
                }

            },
            mounted: function () {
                var pro = this;
                pro.$nextTick(function () {
                    var nd = getQueryString("nd", '2021');
                    pro.initdata(nd);
                    $("#nd").val(nd)
                    var whei = $(window).width()
                    $("html").css({ fontSize: whei / 20 })
                    $(window).resize(function () {
                        var whei = $(window).width()
                        $("html").css({ fontSize: whei / 20 })
                    });

                    $.ajax({
                        url: "/API/VIEWPUBAPI.ashx?Action=SFJS_GETJRSQ",
                        data: JSON.stringify({ "P1": "" }),
                        dataType: "json",
                        type: "post",
                        processData: false,
                        contentType: "text/json",
                        success: function (data, textStatus) {
                            var jrsq = JSON.parse(data.Result);
                            var hj = 0;
                            _.forEach(jrsq, function (item) {
                                hj = hj * 1 + item.col18236 * 1
                            })
                            jrsq.push({ DeptName: "合计", col18236: Math.round(hj * 100) / 100, index: 5 });
                            pro.dpdata.drsq = jrsq;
                            pro.dpdata.ggjl = data.Result1;

                            pro.dpdata.br = data.Result2;
                            pro.dpdata.by = data.Result3;
                            pro.dpdata.bgj = data.Result4;


                            var v1 = pro.dpdata.br[0].ZSL;
                            var v2 = pro.dpdata.br[0].TDMS;
                            var v3 = pro.dpdata.br[0].ZJE;

                            var myChart6 = echarts.init(document.getElementById('echarts6'));
                            var myChart7 = echarts.init(document.getElementById('echarts7'));
                            var myChart8 = echarts.init(document.getElementById('echarts8'));
                            option6 = {
                                series: [{
                                    type: 'pie',
                                    radius: ['70%', '80%'],
                                    color: '#27d08a',
                                    label: {
                                        normal: {
                                            position: 'center'
                                        }
                                    },
                                    data: [{
                                        value: v1,
                                        label: {
                                            normal: {
                                                formatter: function (params) {
                                                    return v1 + "m³";
                                                },
                                                textStyle: {
                                                    fontSize: 12,
                                                    color: '#fff',
                                                }
                                            }
                                        }
                                    }]
                                }]

                            };
                            option7 = {
                                series: [{
                                    type: 'pie',
                                    radius: ['70%', '80%'],
                                    color: '#fccb00',
                                    label: {
                                        normal: {
                                            position: 'center'
                                        }
                                    },
                                    data: [{
                                        value: v2,
                                        name: '灌溉亩数',
                                        label: {
                                            normal: {
                                                formatter: v2 + '亩',
                                                textStyle: {
                                                    fontSize: 12,
                                                    color: '#fff',
                                                }
                                            }
                                        }
                                    }]
                                }]
                            };
                            option8 = {


                                series: [{

                                    type: 'pie',
                                    radius: ['70%', '80%'],
                                    color: '#F56C6C',
                                    label: {
                                        normal: {
                                            position: 'center'
                                        }
                                    },
                                    data: [{
                                        value: v3,
                                        name: '用水金额',
                                        label: {
                                            normal: {
                                                formatter: v3 + '¥',
                                                textStyle: {
                                                    fontSize: 12,
                                                    color: '#fff',
                                                }
                                            }
                                        }
                                    }]
                                }]
                            };
                            setTimeout(function () {

                                myChart6.setOption(option6);
                                myChart7.setOption(option7);
                                myChart8.setOption(option8);

                                myChart6.resize();
                                myChart7.resize();
                                myChart8.resize();
                            }, 500);


                        }
                    });

                    var t = null;
                    t = setTimeout(time, 1000);//開始运行
                    function time() {
                        clearTimeout(t);//清除定时器
                        dt = new Date();
                        var y = dt.getFullYear();
                        var mt = dt.getMonth() + 1;
                        var day = dt.getDate();
                        var h = dt.getHours();//获取时
                        var m = dt.getMinutes();//获取分
                        var s = dt.getSeconds();//获取秒
                        document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
                        t = setTimeout(time, 1000); //设定定时器，循环运行
                    }
                    //var html2 = $(".adduser ul").html()
                    //$(".adduser ul").append(html2)
                    //var ls2 = $(".adduser li").length / 2 + 1
                    //a = 0
                    //ref = setInterval(function () {
                    //    a++
                    //    if (a == ls2) {
                    //        a = 1
                    //        $(".adduser ul").css({ marginTop: 0 })
                    //        $(".adduser ul").animate({ marginTop: -'.5' * a + 'rem' }, 800)
                    //    }
                    //    $(".adduser ul").animate({ marginTop: -'.5' * a + 'rem' }, 800)


                    //}, 4300);




                })

            }
        })


    </script>


    <script type="text/javascript">
        window.addEventListener("resize", function () {
            //myChart2.resize();
            //myChart4.resize();
            //myChart5.resize();
            //myChart6.resize();
            //myChart7.resize();
            //myChart8.resize();

        });
    </script>

</body>
</html>
